<div class="gf-form-group">
  <div class="grafana-info-box">
    <h4>Google Cloud Monitoring认证方式</h4>
    <p>
      有两种方法可以验证Google Cloud
      Monitoring插件的身份-通过上载服务帐户密钥文件或通过自动从Google元数据服务器检索凭据来进行。
      仅当在GCE虚拟机上运行Grafana时，后一个选项才可用。
    </p>

    <h5>上载服务帐户密钥文件</h5>
    <p>
      首先，您需要为要显示其数据的项目创建一个Google Cloud Platform（GCP）服务帐户。
      Grafana数据源与一个GCP项目集成在一起。 如果要可视化来自多个GCP项目的数据，则需要为每个GCP项目创建一个数据源。
    </p>
    <p>
      <strong>监视查看器</strong>角色提供了Grafana所需的所有权限。 需要在GCP上启用以下API，数据源才能正常工作：
      <a
        class="external-link"
        target="_blank"
        href="https://console.cloud.google.com/apis/library/monitoring.googleapis.com"
        >监控API</a
      >
    </p>

    <h5>GCE默认服务帐户</h5>
    <p>
      如果Grafana在Google Compute
      Engine（GCE）虚拟机上运行，则Grafana可以从元数据服务器自动检索默认项目ID和身份验证令牌。
      为了使其正常工作，您需要确保已将服务帐户设置为虚拟机的默认帐户，并且已授予该服务帐户对Google Cloud Monitoring
      Monitoring API的读取权限。
    </p>

    <p>
      可以找到有关如何创建服务帐户的详细说明
      <a class="external-link" target="_blank" href="https://grafana.com/docs/grafana/latest/datasources/cloudmonitoring/"
        >在此文档中。</a
      >
    </p>
  </div>
</div>

<div class="gf-form-group">
  <div class="gf-form">
    <h3>认证方式</h3>
    <info-popover mode="header"
      >上载您的服务帐户密钥文件或粘贴文件内容。 文件内容将被加密并保存在Grafana数据库中。</info-popover
    >
  </div>

  <div class="gf-form-inline">
    <div class="gf-form max-width-30">
      <span class="gf-form-label width-10">认证类型</span>
      <div class="gf-form-select-wrapper max-width-24">
        <select
          class="gf-form-input"
          ng-change="ctrl.gceError = ''"
          ng-model="ctrl.current.jsonData.authenticationType"
          ng-options="f.key as f.value for f in ctrl.authenticationTypes"
        ></select>
      </div>
    </div>
  </div>

  <div
    ng-if="ctrl.current.jsonData.authenticationType === ctrl.defaultAuthenticationType && !ctrl.current.jsonData.clientEmail && !ctrl.inputDataValid"
  >
    <div class="gf-form-group" ng-if="!ctrl.inputDataValid">
      <div class="gf-form">
        <form>
          <dash-upload on-upload="ctrl.onUpload(dash)" btn-text="上载服务帐户密钥文件"></dash-upload>
        </form>
      </div>
    </div>
    <div class="gf-form-group">
      <h5 class="section-heading" ng-if="!ctrl.inputDataValid">或粘贴服务帐户密钥JSON</h5>
      <div class="gf-form" ng-if="!ctrl.inputDataValid">
        <textarea
          rows="10"
          data-share-panel-url=""
          class="gf-form-input"
          ng-model="ctrl.jsonText"
          ng-paste="ctrl.onPasteJwt($event)"
        ></textarea>
      </div>
      <div ng-repeat="valError in ctrl.validationErrors" class="text-error p-l-1">
        <icon name="'exclamation-triangle'"></icon>
        {{valError}}
      </div>
    </div>
  </div>
</div>

<div
  class="gf-form-group"
  ng-if="ctrl.current.jsonData.authenticationType === ctrl.defaultAuthenticationType && (ctrl.inputDataValid || ctrl.current.jsonData.clientEmail)"
>
  <h6>上传的密钥详细信息</h6>

  <div class="gf-form">
    <span class="gf-form-label width-10">项目</span>
    <input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.defaultProject" />
  </div>
  <div class="gf-form">
    <span class="gf-form-label width-10">客户电邮</span>
    <input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.clientEmail" />
  </div>
  <div class="gf-form">
    <span class="gf-form-label width-10">令牌地址</span>
    <input class="gf-form-input width-40" disabled type="text" ng-model="ctrl.current.jsonData.tokenUri" />
  </div>
  <div class="gf-form" ng-if="ctrl.current.secureJsonFields.privateKey">
    <span class="gf-form-label width-10">私钥</span>
    <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
  </div>

  <div class="gf-form width-18" style="margin-top: 24px;">
    <a class="btn btn-secondary gf-form-btn" href="#" ng-click="ctrl.resetValidationMessages()">重置服务帐户密钥 </a>
    <info-popover mode="right-normal">
      重置以清除上载的密钥并上载新文件。
    </info-popover>
  </div>
</div>

<p
  class="gf-form-label"
  ng-hide="ctrl.current.secureJsonFields.privateKey || ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType"
>
  <icon name="'save'"></icon> 上传文件后，别忘了保存更改。
</p>

<div class="gf-form" ng-if="ctrl.gceError">
  <pre class="gf-form-pre alert alert-error">{{ctrl.gceError}}</pre>
</div>

<p class="gf-form-label" ng-show="ctrl.current.jsonData.authenticationType !== ctrl.defaultAuthenticationType">
  <icon name="'save'"></icon> 通过单击“保存并测试”来验证GCE默认服务帐户
</p>
